window.onload = function() {
  var banner = document.getElementById("banner");
  var imglist = document.getElementById("img-list");
  var bannerlist = document.getElementById("banner-list");
  var arr = document.getElementById("arr");
  var toLeft = document.getElementById("toLeft");
  var toRight = document.getElementById("toRight");
  var index = 0;
  console.log(imglist.children);
  // var arrimg = imglist.children;
  var arrbanner = bannerlist.children;
  var timer = setInterval(autoplay, 1000);
  //自动播放
  function autoplay() { //自动播放里的方法
    if (index == 4) { //放了5张图片 当下标到4的时候 其实显示的是第一张图(最后一张也是第一张图)
      index = 1;  //设置下标为1 下一张显示的话 就会显示第二张图
      imglist.style.left = 0; //与此同时 就把 left的距离拉回到最开始的位置
    } else {
      index++;
    }
    animate(imglist, { left: -810 * index }, 10); //改变 ul的左边位置 imglist==>ul
    for (let i = 0; i < arrbanner.length; i++) {
      arrbanner[i].className = ""; //设置全部样式为空
    }
    arrbanner[index == 4 ? 0 : index].className = "active";//设置单个样式 当下标为4时是最后一张 强行把下标定为0;
    console.log(index);
  }

  banner.onmouseover = function() {
    animate(arr, { opacity: 100 }, 10);//当鼠标经过时 透明度设置为100 让其显示
    clearInterval(timer);
  };

  banner.onmouseout = function() {
    timer = setInterval(autoplay, 1000); //要重新赋值给timer  让它重新自动跑
    animate(arr, { opacity: 0 }, 10); //并且让左右鼠标消失
  };
  toLeft.onclick = function () {
    //当往左走时 在最后一张点的时候也就相当于第一张 所以设置为 index = 0 
    if (index == 4) {
      index = 0;
      imglist.style.left = 0;
    } else if (index == 0) {
      index = 0;
    } else {
      index--;
    }
    for (let i = 0; i < arrbanner.length; i++) {
      arrbanner[i].className = "";
    }
    arrbanner[index].className = "active"; //index = 0 以后只能显示第一个图的样式
    console.log(index);

    animate(imglist, { left: -810 * index }, 10);  //index = 0 以后只能显示第一个图
  };
  toRight.onclick = function () {
    //当往右点击时
    if (index == 4) { //当在下标为4的时候点击(也就是代码上的最后一张)就设置下标index = 1;
      index = 1;
      imglist.style.left = 0; //设置位置
    } else if (index == 3) { //当下标为3 (也就是界面显示为最后一张的时候) 设置 index = 3; 不管怎么点都是最后一张
      index = 3;
    } else {
      index++;
    }
    for (let i = 0; i < arrbanner.length; i++) {
      arrbanner[i].className = ""; //排它玩法 
    }
    arrbanner[index].className = "active"; //排它的玩法
    animate(imglist, { left: -810 * index }, 10); //这里最终还是最后一张 当点到最后的时候
  };
  for (let i = 0; i < arrbanner.length; i++) {
    arrbanner[i].onmouseover = function() { //绑定了over当经过的时候就赋值给index 让其显示在对就的index上
      for (let j = 0; j < arrbanner.length; j++) {
        arrbanner[j].className = "";
      }
      index = i;
      arrbanner[index].className = "active";
      animate(imglist, { left: -810 * index }, 10);
    };
  }
};
